<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('配置多选')}`">{{ $t('配置多选') }}</t>
            <li>设置<span class="d-code">multiple</span>为<span class="d-code">true</span>可以使控件支持多选</li>
        </template>
        <div style="width: 300px;color:#666;">
            <sib-item v-model="value" :props="props"></sib-item>
        </div>
        <div style="color:#666;">
            <p>v-model 绑定值：{{ value }}</p>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const options = [
            {
                label: 'IT研发',
                value: 'ityanfa',
                children: [
                    {
                        label: '前端组',
                        value: 'qianduan',
                        children: [
                            {
                                label: '飞天老李',
                                value: 'feitianlaoli',
                            },
                            {
                                label: '法外狂徒张三',
                                value: 'zhangsan',
                            },
                        ],
                    },
                    {
                        label: '后端组',
                        value: 'houduan',
                        children: [
                            {
                                label: '带薪拉屎老六',
                                value: 'laoliu',
                            },
                            {
                                label: '芜湖起飞大司马',
                                value: 'dasima',
                            },
                        ],
                    },
                ],
            },
        ];

        const value = ref(null);
        const props = reactive({
            type: 'cascader',
            options,
            // 多选模式下是否在展示时折叠Tag
            collapseTags: true,
            // 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签
            collapseTagsTooltip: true,
            optionProps: {
                // 是否启用多选
                multiple: true,
            },
        });

        return {
            props,
            value,
            templateString: `<template>
    <sib-item v-model="value" :props="props"></sib-item>
    <p>v-model 绑定值：{{ value }}</p>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const options = [
            {
                label: 'IT研发',
                value: 'ityanfa',
                children: [
                    {
                        label: '前端组',
                        value: 'qianduan',
                        children: [
                            {
                                label: '飞天老李',
                                value: 'feitianlaoli',
                            },
                            {
                                label: '法外狂徒张三',
                                value: 'zhangsan',
                            },
                        ],
                    },
                    {
                        label: '后端组',
                        value: 'houduan',
                        children: [
                            {
                                label: '带薪拉屎老六',
                                value: 'laoliu',
                            },
                            {
                                label: '芜湖起飞大司马',
                                value: 'dasima',
                            },
                        ],
                    },
                ],
            },
        ];

        const value = ref(null);
        const props = reactive({
            type: 'cascader',
            options,
            // 多选模式下是否在展示时折叠Tag
            collapseTags: true,
            // 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签
            collapseTagsTooltip: true,
            optionProps: {
                // 是否启用多选
                multiple: true,
            },
        });

        return { props, value };
    },
};
<\/script>`,
        };
    },
};
</script>
